<!--
 * @Author: ykp 501436989@qq.com
 * @Date: 2025-05-16 16:10:32
 * @LastEditors: ykp 501436989@qq.com
 * @LastEditTime: 2025-08-14 16:00:52
 * @FilePath: \vue-ts\src\views\todolist\components\myTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <div>
        <div class="w-full h-10 flex justify-between pl-4"> <el-button type="primary" @click="addFun()">新增</el-button>
        </div>
        <!-- 任务任务状态 -->
        <el-table v-loading="loading" :data="typeList">
            <el-table-column label="任务状态" align="center" prop="label" />
            <el-table-column label="色彩标签" align="center" prop="bgColor" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link  v-if="scope.row.id!=='0'"type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button v-if="scope.row.id!=='0'" link type="primary" icon="Delete" @click="handleDelete(scope.row.ids)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog title="新增" v-model="open" width="400px" append-to-body>
        <el-form ref="ruleFormRef" :rules="rules" label-width="auto" :inline="true" :model="form">
            <el-form-item label="任务状态" prop="label" :label-width="100">
                <el-input v-model="form.label" style="width: 250px" :maxlength="50" placeholder="输入任务状态"
                    autocomplete="off" />
            </el-form-item>
            <el-form-item label="色彩标签" prop="bgColor" :label-width="100">
                <el-input v-model="form.bgColor" style="width: 250px" :maxlength="50" placeholder="输入色彩标签"
                    autocomplete="off" />
            </el-form-item>

        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click=" submitForm(ruleFormRef)">确 定</el-button>
                <el-button @click="reset()">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue';
import type { FormInstance, FormRules } from "element-plus";
import type { ListType } from "@/type/todolist/card"; //引入ts类型定义
import { querylist, queryDetails, addItem, deleteItem, putItem } from '../js/goTaskStatus'
import { uuid } from "../js/uuid.js"; //uuid 生成方法
const typeList = ref<ListType[]>([]);
const loading = ref(false);
const open = ref(false);
const ruleFormRef = ref<FormInstance>();
const form = ref<ListType>({
    id: uuid(32),
    label: '',
    bgColor: '',

});
const isAbb = ref(true)
const rules = ref<any>({
    label: [{ required: true, message: "任务状态不能为空", trigger: "blur" }],
    bgColor: [{ required: true, message: "色彩标签不能为空", trigger: "blur" }]
},)
/** 查询字典类型列表 */
const getList = async function () {
    try {
        loading.value = true
        let list = await querylist() as ListType[]
        loading.value = false
        typeList.value = list
        console.log(list)
    } catch (err) {
        console.log(err)
    }

}
/** 表单重置 */
const reset = function () {
    form.value = {
        id: uuid(32),
        label: null,
        bgColor: null,
    };
    if( ruleFormRef.value){
 ruleFormRef.value.resetFields();
    }
   open.value = false
}


const addFun = function () {
    reset()
    isAbb.value = true
      form.value = {
        id: uuid(32),
        label: null,
        bgColor: null,
    };
    open.value = true
}
const handleUpdate = function (data: ListType) {
    isAbb.value = false
    form.value = structuredClone({ ...data })
    open.value = true
}
import { useCounterStore } from '../stores/counter'
const pinias = useCounterStore()
import { ElMessage, ElMessageBox } from 'element-plus'
const handleDelete = async function (id: number) {
    
 let els = await ElMessageBox.confirm(
    '是否删除该列表,删除分组后记录将迁移到未开始中',
    '删除提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).catch(() => {

    ElMessage({
      type: 'info',
      message: '取消删除',
    })
       
  })
    console.log(els,'155454')
  if(!els)return
    await deleteItem(id+'')
    open.value = false
    getList();
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    console.log(formEl)
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let arrs: ListType = JSON.parse(JSON.stringify(form.value));
            if (isAbb.value == true) {
                await addItem(arrs);
            } else {
                await putItem(arrs);
            }
            open.value = false
            getList();
              reset()
        } else {
            console.log("error submit!", fields);
        }
    });
};


getList();
</script>

<style scoped></style>